<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> navigate </TITLE>
<style type="text/css">
ul#navigate{border:1px solid red;list-style:none;margin:0px;padding:3px 0px;}
#navigate li{display:inline;margin-right:3px;}
#navigate li a{background:transparent url(images/nav_bg.gif) left top no-repeat;padding-left:23px; }
#navigate li a span{background:transparent url(images/nav_bg.gif) right -352px no-repeat;padding-right:20px; }
#navigate li a:hover,#navigate li a.current{background:transparent url(images/nav_bg.gif) left -178px no-repeat;padding-left:23px;}
#navigate li a:hover span,#navigate li a.current span{background:transparent url(images/nav_bg.gif) right -530px no-repeat;padding-right:20px;}
</style>
</HEAD>

<BODY>
<ul id="navigate">
	<li><a href="#"><span>menu1</span></a></li>
	<li><a href="#"><span>menu2</span></a></li>
	<li><a class="current" href="#"><span>menu3</span></a></li>
	<li><a href="#"><span>menu4</span></a></li>
	<li><a href="#"><span>menu5</span></a></li>
	<li><a href="#"><span>menu6</span></a></li>
</ul>
<br>
Ref:http://www.blueidea.com/tech/web/2009/7281.asp#
</BODY>
</HTML>
